<template>
  <a-modal
    v-model:visible="visible"
    :title="formState.id ? '修改字典' : '新增字典'"
    :width="700"
    centered
    @ok="onSave"
    @cancel="cancel"
  >
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :label-col="{ style: 'width: 100px' }"
    >
      <a-form-item label="字典名称" required name="dictName">
        <a-input
          v-model:value="formState.dictName"
          placeholder="请输入"
          :maxlength="128"
        ></a-input>
      </a-form-item>
      <a-form-item label="字典类型" required name="dictType">
        <a-input
          v-model:value="formState.dictType"
          placeholder="请输入"
          :maxlength="128"
          :disabled="formState.id != '' && formState.id != undefined"
        ></a-input>
      </a-form-item>
      <a-form-item label="状态" name="status">
        <a-radio-group v-model:value="formState.status" name="radioGroup">
          <a-radio
            v-for="(item, index) in dictStatusOptions"
            :key="index"
            :value="item.value"
            >{{ item.label }}</a-radio
          >
        </a-radio-group>
      </a-form-item>
      <a-form-item label="备注：" name="remark">
        <a-textarea
          v-model:value="formState.remark"
          :maxlength="100"
          show-count
          placeholder="请输入"
        ></a-textarea>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
// api
import { postDictAdd, postDictUpdate, postDictDetail } from "@/api/system";

import { dictStatusOptions } from "@/views/constant";
import { message } from "ant-design-vue";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits(["ok"]);
const visible = ref(false);
const formRef = ref(null);
const rules = {
  dictName: [{ required: true, message: "请输入字典名称" }],
  dictType: [{ required: true, message: "请输入字典类型" }],
};
const formState = reactive({
  id: "",
  dictName: undefined,
  dictType: undefined,
  status: 0,
  remark: undefined,
  createdUserName: undefined,
  gmtCreate: undefined,
});

const onSave = () => {
  formRef.value
    .validate()
    .then(() => {
      const reques = formState.id ? postDictUpdate : postDictAdd;
      reques(formState).then(() => {
        message.success(formState.id ? "修改成功" : "新增成功");
        formRef.value.resetFields();
        visible.value = false;
        emit("ok");
      });
    })
    .catch((error) => {
      console.log("error", error);
    });
};
const cancel = () => {
  formRef.value.resetFields();
};

watch(
  () => visible.value,
  () => {
    if (visible.value) {
      if (props.data.id) {
        postDictDetail({ id: props.data.id }).then((res) => {
          Object.keys(formState).forEach((key) => {
            formState[key] = res.data[key];
          });
        });
      } else {
        Object.keys(formState).forEach((key) => {
          formState[key] = key === "status" ? 0 : props.data[key];
        });
      }
    }
  }
);
defineExpose({
  visible,
});
</script>

<style scoped lang="less"></style>
